// 接受一个函数作为参数，或者返回一个值为函数的函数，为高阶函数，简称HOC

// 例如:
function test() {
  return () => {
    console.log("高阶函数")
  }
}

const a = test()
a()

// 高阶函数是参数为组件，并返回一个新组件的函数（高阶组件是一个函数)
import { PureComponent } from "react"
function hoc(Cpn) {
  //    1. 定义类组件
  class NewCpn extends PureComponent {
    constructor() {
      super()
    }

    render() {
      return <Cpn /> // 这里其实就是做了一层拦截，在这之上可以做一些事情
    }
  }

  return NewCpn

  //    2. 定义函数组件
  //     return <Cpn />;
}

class HelloWorld extends PureComponent {
  constructor() {
    super()
  }

  render() {
    return <h1>Hello World</h1>
  }
}

export const HelloWorldHOC = hoc(HelloWorld)

function SystemConfig(OriginComponent) {
  class NewComponent extends PureComponent {
    constructor() {
      super()
      this.state = {
        SystemConfig: {
          color: "red",
          fontSize: 30
        }
      }
    }

    render() {
      const { SystemConfig } = this.state
      return <OriginComponent {...SystemConfig} />
    }
  }

  return NewComponent
}

// 函数组件
export const Home = SystemConfig((props) => {
  return <h1>Home:color-{props.color}</h1>
})
export const Profile = SystemConfig((props) => {
  return <h2>Profile:fontSize-{props.fontSize}</h2>
})
